<template>
  <div class="content-wrapper">
    <div class="content-header">消息中心</div>
    <div class="content-container">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="未读消息" name="unread">
          <el-form :inline="true" :model="listQuery" class="filter-container">
            <el-form-item>
              <el-button
                class="filter-item"
                size="small"
                round
                icon="el-icon-check"
                @click="haveReadMultiple"
              >
                批量标记
              </el-button>
              <el-button
                class="filter-item"
                size="small"
                round
                icon="el-icon-check"
                @click="haveReadMultipleAll"
              >
                标记全部为已读
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            height="450"
            v-loading="listLoading"
            @selection-change="getReadTableSelect"
            :data="pageList"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column type="selection" width="55" fixed />
            <el-table-column
              label="发送人"
              prop="fromId"
              :formatter="
                (row, column, cellValue, index) => {
                  return '系统'
                }
              "
              width="160px"
            />
            <el-table-column
              label="内容"
              prop="data"
              :formatter="parseData"
              min-width="200px"
            />
            <el-table-column label="发送时间" prop="sendTime" width="160px" />
            <el-table-column
              label="操作"
              align="center"
              width="80px"
              fixed="right"
            >
              <template slot-scope="{ row, $index }">
                <el-dropdown trigger="click" class="filter-item">
                  <el-button type="text" class="el-icon-more" />
                  <el-dropdown-menu slot="dropdown" class="user-dropdown">
                    <el-dropdown-item @click.native="lookOver(row)"
                      >查看</el-dropdown-item
                    >
                    <el-dropdown-item @click.native="haveRead(row)"
                      >标记已读</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
          <Pagination
            v-show="total > 0"
            :total="total"
            :page-number.sync="listQuery.pageNumber"
            :page-size.sync="listQuery.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
        <el-tab-pane label="已读消息" name="read">
          <el-form :inline="true" :model="listQuery" class="filter-container">
            <el-form-item>
              <el-button
                class="filter-item"
                size="small"
                round
                icon="el-icon-delete danger-color"
                @click="deleteMultiple"
              >
                批量删除
              </el-button>
            </el-form-item>
          </el-form>
          <el-table
            ref="readTable"
            @selection-change="getReadTableSelect"
            height="450"
            v-loading="listLoading"
            :data="pageList"
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column type="selection" width="55" fixed />
            <el-table-column
              label="发送人"
              prop="fromId"
              :formatter="
                (row, column, cellValue, index) => {
                  return '系统'
                }
              "
              width="160px"
            />
            <el-table-column
              label="内容"
              prop="data"
              :formatter="parseData"
              min-width="200px"
            />
            <el-table-column label="发送时间" prop="sendTime" width="160px" />
            <el-table-column label="查看时间" prop="updateTime" width="160px" />
          </el-table>
          <Pagination
            v-show="total > 0"
            :total="total"
            :page-number.sync="listQuery.pageNumber"
            :page-size.sync="listQuery.pageSize"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  page,
  update,
  deleteMultiple,
  haveReadMultiple
} from '@/api/mc/message'

export default {
  components: { Pagination },
  data() {
    return {
      activeTab: 'unread',
      listLoading: false,
      pageList: [{}],
      listQuery: {
        pageNumber: 1,
        pageIndex: 0,
        pageSize: 10,
        status: 1
      },
      total: 0,
      tableSelect: null
    }
  },
  watch: {
    activeTab() {
      this.getList()
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    haveReadMultiple() {
      if (!this.tableSelect || this.tableSelect.length == 0) {
        this.$message.info('请先选择后操作')
        return
      }
      haveReadMultiple({ messageIds: this.tableSelect }).then((res) => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    /**
     * 所有设为已读
     */
    haveReadMultipleAll() {
      haveReadMultiple({}).then((res) => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    /**
     * 获取表选择id集合
     */
    getReadTableSelect(selection) {
      if (selection) {
        this.tableSelect = selection.map((e) => e.messageId)
      }
      console.log(this.tableSelect, 'tableSelect')
    },
    /**
     * 删除多个
     */
    deleteMultiple() {
      if (!this.tableSelect || this.tableSelect.length == 0) {
        this.$message.info('请先选择后操作')
        return
      }
      deleteMultiple({ messageIds: this.tableSelect }).then((res) => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    /**
     * 查看
     */
    lookOver(row) {
      this.$router.push({ path: '/unread' })
    },
    /**
     * 已读
     */
    haveRead(row) {
      let data = {
        messageId: row.messageId,
        status: 3
      }
      update(data).then((res) => {
        this.$message.success('操作成功')
        this.getList()
      })
    },
    getList() {
      //this.listLoading = true
      this.listQuery.pageIndex = this.listQuery.pageNumber - 1
      if (this.activeTab == 'unread') {
        this.listQuery.status = 1
      }
      if (this.activeTab == 'read') {
        this.listQuery.status = 3
      }
      page(this.listQuery).then((res) => {
        console.log('发送请求', this.listQuery.status)
        this.pageList = res.data.rows
        this.total = res.data.total
        if (this.listQuery.status == 1) {
          this.$store.commit('message/MESSAGE_COUNT', this.total)
        }
        this.tableSelect = null
      })
    },
    parseData(row, column, cellValue, index) {
      if (cellValue) {
        let data = JSON.parse(cellValue)
        return data.remark
      }
      return ''
    }
  }
}
</script>
